<template>
  <f7-page class="bg-color-white">
    <f7-navbar :title="$t('m.promote1')" back-link=" "></f7-navbar>

    <!--<div>
      <div class="logo-bottom">
        <img src="../static/logo.jpg" alt="">
      </div>
      <h1>零极生态</h1>
      <p>{{$t('m.promote3')}}</p>
      <h6>{{promote.invit_code}}</h6>
      <img :src="promote.qr_code1" alt="">
      <p>{{$t('m.promote4')}}</p>

      <p class="content-padding margin-t30">{{promote.link1}}</p>
      <van-button class="margin-t20" style="width: auto" size="mini" round type="info" @click="handleCopy">{{$t('m.copy')}}</van-button>
    </div>-->
    <div class="bg-box">
      <span class="yaoqingma">{{promote.invit_code}}</span>
      <img :src="promote.qr_code1" alt="">
      <p>{{promote.link1}}</p>
      <a href="javascript:;" @click="handleCopy"></a>
    </div>
  </f7-page>
</template>

<script>
  import { getPromote } from "../api/my";

  export default {
    name: "promote",
    data() {
      return {
        promote: {}
      }
    },
    mounted() {
      this.init();
    },
    methods: {
      init() {
        getPromote().then(res =>{
          this.promote = res.return;
        })
      },
      handleCopy() {
        this.$copyText(this.promote.link1).then((e) => {
          this.$toast(this.$t('m.copySuccess'));
        }, function (e) {
          console.log(e)
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .bg-box {
    height: 100%;
    /*border: 1px solid red;*/
    background: url("../static/promote-bg.jpg") no-repeat center top;
    background-size: 100% 100%;
    position: relative;
    .yaoqingma {
      position: absolute;
      left: 50%;
      top: 61%;
    }
    p {
      /*border: 1px solid red;*/
      position: absolute;
      left: 16%;
      width: 50%;
      bottom: 7.3%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    a {
      display: block;
      /*border: 1px solid green;*/
      position: absolute;
      height: 60px;
      right: 15%;
      width: 20%;
      bottom: 6%;
    }
    img {
      width: 190px;
      position: absolute;
      left: 50%;
      bottom: 14%;
      transform: translateX(-50%);
    }
  }

  div {
    text-align: center;
    h1 {
      /*padding: 50px 0;*/
      margin-bottom: 100px;
      font-size: 40px;
      font-weight: bold;
      color: $mainColor;
    }
    h6 {
      font-weight: bold;
      color: $mainColor;
      font-size: 30px;
      padding: 10px 0 80px;
    }
    img {
      width: 250px;
    }
    p:nth-of-type(2) {
      color: $colorGrey;
    }
    .link-p {
      padding: 0 $padding20;
      margin-top: $padding;
      font-size: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      .van-button {
        width: auto;
        margin-left: 10px;
      }
    }
  }
  .logo-bottom {
    margin-top: 20%;
  }
</style>
